<template>
  <div class="div">
    <Row style="margin-top: 0.8rem">
      <i-col span="24" style="font-size: 12px;" align="left">
        <ol class="history-ol" v-for="item in historyEmailList">
          <ul style="border-bottom: 0.1rem solid #cacaca;padding: 0.2rem 0">
            <p @click="showHistoryEmail(item)" style="font-weight: 400;font-size: 12px;cursor:pointer;"><span class="base_key">标题：</span>{{item.subject}}</p>
            <p @click="showHistoryEmail(item)" style="cursor:pointer;" v-if="item.text!=null" class="base_key" ><span class="base_key">正文：</span>{{item.text.substring(0, 200) }}</p>
            <p @click="showHistoryEmail(item)" style="font-size:12px;cursor:pointer;text-align: right">
              <span style="margin-right: 0.3rem"></span>
              <KeyValueView :title="item.source=='发'?'发送员工':'负责人'">{{item.employeeName}}</KeyValueView>
              <Tag v-if="item.source=='收'" color="green" style="margin-right: 0.3rem">{{item.source}}</Tag>
              <Tag v-if="item.source=='发'" color="blue" style="margin-right: 0.3rem">{{item.source}}</Tag>
              {{$tiyBJTime(new Date(item.createTime).getTime())}}
            </p>
          </ul>
        </ol>
      </i-col>
    </Row>

    <!-- 历史邮件详情 -->
    <Modal
      v-model="historyDetail.isShow"
      title="详情"
      width="65"
      :styles="{align:'center'}"
      :scrollable=true>
      <div slot="footer"></div>
      <div class="div">
        <Row style="margin-top: 1rem">
          <i-col span="24" style="font-size: 12px;" align="right">
            <span>发件邮箱：</span><span>{{historyDetail.email.senderEmail}}</span>
            <span style="margin-left: 1rem">收件邮箱：</span><span>{{historyDetail.email.receiverEmail}}</span>
            <span style="margin-left: 1rem">时间：</span><span>{{ $tiyBJTime(new Date(historyDetail.email.createTime).getTime())}}</span>
          </i-col>
        </Row>
        <divider></divider>
        <div>
          <span class="base_key">邮件标题：</span>
          <span class="base_value">
            {{historyDetail.email.subject}}
          </span>
        </div>
        <div style="margin-top: 0.5rem">
          <p class="base_key">邮件正文：</p>
          <div v-if="historyDetail.email.css" class="ql-editor content" @click="proxyImage" v-html="historyDetail.email.content" ></div>
          <div v-else class="content" @click="proxyImage" v-html="historyDetail.email.content" ></div>
        </div>
      </div>
      <div  v-if="historyDetail.email.attachment.length>0" >
        <Divider orientation="left">附件{{historyDetail.email.attachment.length}}</Divider>
        <Row>
          <i-col v-for="item in historyDetail.email.attachment" :key="item.id" class="demo-upload-list">
            <img :src="item.fileUrl"  ></img>
            <div class="demo-upload-list-cover" @click="showImage(item.fileUrl)">
              <p><span>{{item.fileName}}({{item.fileSize}})</span></p>
              <div style="position: absolute;bottom:0px;right:8px;">
                <Tooltip content="下载" placement="top">
                  <Icon type="md-download" @click.stop="download(item.fileUrl,item.fileName)"></Icon>
                </Tooltip>
                <Tooltip content="预览" placement="top">
                  <Icon type="ios-eye-outline" @click.stop="showImage(item.fileUrl)"></Icon>
                </Tooltip>
              </div>
            </div>
          </i-col>
        </Row>
      </div>
    </Modal>

    <!-- 图片 -->
    <Modal
      v-model="modalImage.isShow"
      title=""
      :styles="{align:'center'}"
      :scrollable=true>
      <div slot="footer"></div>
      <div align="center"><Img :src="modalImage.url" style="max-width: 450px" /></div>
    </Modal>

  </div>
</template>


<script>

import KeyValueView from "../widgets/KeyValueView";
export default {
  components: {KeyValueView},
  data(){
    return {
      historyEmailList:[],
      historyDetail:{
        isShow:false,
        email:{
          id:'',
          source:'',
          createTime:'',
          subject:'',
          text:'',
          senderEmail:'',
          receiverEmail:'',
          content:'',
          css:false,
          userName:'',
          attachment:[],
        },
      },
      modalImage:{
        isShow:false,
        url:'',
      },
    }
  },
  props:{
    isShow:false,
    sysEmail:Number,
  },
  methods:{
    proxyImage: function (e) {
      if (e.target.tagName.toUpperCase() === 'IMG') {
        // 这里是需要执行的方法
        this.showImage(e.target.src);
      }
    },
    showImage(fileUrl) {
      this.modalImage.isShow = true;
      this.modalImage.url = fileUrl;
    },
    showHistoryEmail(historyEmail){
      let self=this;
      self.historyDetail.email.attachment.splice(0,self.historyDetail.email.attachment.length);
      let type;
      self.historyDetail.email.id=historyEmail.id;
      self.historyDetail.email.source=historyEmail.source;
      self.historyDetail.email.createTime=historyEmail.createTime;
      self.historyDetail.email.subject=historyEmail.subject;
      self.historyDetail.email.text=historyEmail.text;
      self.historyDetail.email.userName=historyEmail.userName;
      if(historyEmail.source=="发"){
        self.historyDetail.email.senderEmail=historyEmail.senderEmail;
        self.historyDetail.email.receiverEmail=historyEmail.virtualName;
        type="send";
        self.historyDetail.email.css=true;
      }else{
        self.historyDetail.email.senderEmail=historyEmail.virtualName;
        self.historyDetail.email.receiverEmail=historyEmail.receiverEmail;
        type="parse";
        self.historyDetail.email.css=false;
      }
      let param = {
        "id": historyEmail.id,
        "type": type,
        "yunKey": historyEmail.yunKey,
      };
      self.$apiEmail.queryEmailDetail(param).then(function (response) {
        if(response.success){
          let emailSend = response.result;
          self.historyDetail.email.content=emailSend.content;

          self.historyDetail.email.attachment=emailSend.attachmentList;
        }else{
          self.$Message.error(response.errorMessage);
        }
        self.$Spin.hide();
      });

      self.historyDetail.isShow=true;
    },
    queryEmailHistoryList(virtualName) {
      let self = this;
      let param = {
        "email": virtualName,
        "sysEmail":self.sysEmail,
      };

      self.historyEmailList.splice(0, self.historyEmailList.length);
      self.$apiEmail.getEmailHistory(param).then(function (response) {
        if(response.success){
          let emailList = response.result;
          emailList.forEach(
            function (item) {
              self.historyEmailList.push(item);
            }
          );
        }
      });
    },
    more(){
      this.isMore=!this.isMore;
      this.moreText="更多"==this.moreText?"收缩":"更多";
    },
  },
}
</script>

<!--css样式-->
<style  lang="less">
@import  (once,optional)  "../css/base";

.div{
  margin: 0.5rem 1rem;
}

</style>
